<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="Hexo"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="website" />
    

    <!--Page Cover-->
    

    
        <meta name="twitter:card" content="summary" />
    
    
    

    <!-- Title -->
    
    <title>Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Custom CSS -->
    
<link rel="stylesheet" href="/css/style.css">


    <!-- Google Analytics -->
    


<meta name="generator" content="Hexo 6.3.0"></head>


<body>

<div class="bg-gradient"></div>
<div class="bg-pattern"></div>

<!-- Menu -->
<!--Menu Links and Overlay-->
<div class="menu-bg">
    <div class="menu-container">
        <ul>
            
            <li class="menu-item">
                <a href="/">
                    Home
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/archives">
                    Archives
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/about.html">
                    About
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/tags">
                    Tags
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/categories">
                    Categories
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/contact.html">
                    Contact
                </a>
            </li>
            
        </ul>
    </div>
</div>

<!--Hamburger Icon-->
<nav>
    <a href="#menu"></a>
</nav>

<div class="container">

    <!-- Main Content -->
    <div class="row">
    <div class="col-sm-12">

        <!--Title and Logo-->
        <header>
    <div class="logo">
        <a href="/"><i class="logo-icon fa fa-cube" aria-hidden="true"></i></a>
        
            <h1 id="main-title" class="title">Hexo</h1>
        
    </div>
</header>

        <section class="main">
            
                
<div class="post">

    <div class="post-header index">
        <h1 class="title">
            <a href="/2022/12/06/demo/">
                day002-HTML
            </a>
        </h1>
        <div class="post-info">
            
                <span class="date">2022-12-06</span>
            
            
            
        </div>
    </div>

    
        <div class="content">
            <h1 id="前端的主要任务"><a href="#前端的主要任务" class="headerlink" title="前端的主要任务"></a>前端的主要任务</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210809175615.png" alt="image-20210809175615116"></p>
<blockquote>
<p>写静态页面</p>
<ul>
<li>产品经理出原型图 → UI 小姐姐出效果图 → 前端根据效果图写静态页面</li>
</ul>
<p>调用接口</p>
<ul>
<li>UI 小姐姐出效果图 → 效果图给后端一份, 后端程序员根据效果图写接口 → 前端完成静态页面后, 调用后台写的接口, 展示数据到页面</li>
</ul>
</blockquote>
<h1 id="静态文件用什么来做"><a href="#静态文件用什么来做" class="headerlink" title="静态文件用什么来做?"></a>静态文件用什么来做?</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210809184906.png" alt="image-20210809184906758"></p>
<h1 id="html-css-js-有什么关系"><a href="#html-css-js-有什么关系" class="headerlink" title="html css js 有什么关系"></a>html css js 有什么关系</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210809185028.png" alt="image-20210809185028629"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210809185133.png" alt="image-20210809185133365"></p>
<h1 id="显示后缀的方法"><a href="#显示后缀的方法" class="headerlink" title="显示后缀的方法"></a>显示后缀的方法</h1><blockquote>
<p>勾选文件扩展名, 显示后缀</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922191052.png" alt="image-20220922191052656"></p>
<h1 id="什么是网页"><a href="#什么是网页" class="headerlink" title="什么是网页"></a>什么是网页</h1><blockquote>
<ol>
<li>网页是一个以<code>.html</code>为后缀的文件, 使用浏览器打开</li>
<li>网页通常可以包含, 文字, 图片, 音频, 视频</li>
<li>本质是 html 代码, 代码主要由前端工程师编写</li>
<li>html 代码, 由浏览器解析和渲染之后, 用户就可以看到页面了</li>
<li>html 网页文件是纯文本</li>
</ol>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810120722.png" alt="image-20210810120722332"></p>
<h1 id="什么是-html"><a href="#什么是-html" class="headerlink" title="什么是 html"></a>什么是 html</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210824154828.png" alt="image-20200529150412260"></p>
<blockquote>
<p>HTML（Hyper Text Markup Language）</p>
<p>超文本标记语言, 用来编写网页, 负责页面的结构</p>
</blockquote>
<h1 id="选择题"><a href="#选择题" class="headerlink" title="选择题"></a>选择题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823025418.png" alt="image-20210823025418067"></p>
<h1 id="选择题-1"><a href="#选择题-1" class="headerlink" title="选择题"></a>选择题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823025605.png" alt="image-20210823025605109"></p>
<h1 id="网站和网页的关系"><a href="#网站和网页的关系" class="headerlink" title="网站和网页的关系"></a>网站和网页的关系</h1><blockquote>
<ol>
<li>网页: 网站的页面</li>
<li>一个网站会有很多网页</li>
</ol>
</blockquote>
<h1 id="四大浏览器以及市场份额"><a href="#四大浏览器以及市场份额" class="headerlink" title="四大浏览器以及市场份额"></a>四大浏览器以及市场份额</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810121200.png" alt="img"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810121115.png" alt="image-20210810121114947"></p>
<h1 id="浏览器内核"><a href="#浏览器内核" class="headerlink" title="浏览器内核"></a>浏览器内核</h1><blockquote>
<p>浏览器内核, 又称渲染引擎, 专门负责对代码进行解析渲染的</p>
<p>不同的浏览器, 使用不同的浏览器内核, 性能也不一样</p>
<p>对相同的 html 代码, 渲染出来的结果可能略有不同</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810120722.png" alt="image-20210810120722332"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810121349.png" alt="image-20210810121349463"></p>
<h1 id="选择题-2"><a href="#选择题-2" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下列选项中描述正确的是？（选择一项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161817898.png" alt="image-20211016181742860"></p>
<h1 id="作业-创建第一个网页-自我介绍"><a href="#作业-创建第一个网页-自我介绍" class="headerlink" title="[作业]创建第一个网页(自我介绍)"></a>[作业]创建第一个网页(自我介绍)</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810144748.png" alt="image-20210810144748832"></p>
<blockquote>
<p>前提: 下载并安装 vscode</p>
<p><a target="_blank" rel="noopener" href="https://code.visualstudio.com/#alt-downloads">https://code.visualstudio.com/#alt-downloads</a></p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922192459.png" alt="image-20220922192459889"></p>
<blockquote>
<ol>
<li>新建一个项目文件夹, 使用 vscode 打开</li>
</ol>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810151826.png" alt="image-20210810151826626"></p>
<blockquote>
<ol start="2">
<li>在文件夹中, 新建 html 文件, 起名字, 注意<code>.html</code>结尾</li>
</ol>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810151941.png" alt="image-20210810151941571"></p>
<blockquote>
<ol start="3">
<li>敲 html 代码, 输入<code>!</code>, 或者<code>html:5</code>, 使用回车键确认, 或者 tab 键</li>
</ol>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810152045.png" alt="image-20210810152045137"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922193234.png" alt="image-20220922193234789"></p>
<blockquote>
<ol start="4">
<li>编写代码, 如果是标题, 使用<code>&lt;h1&gt;&lt;/h1&gt;</code>, 如果是段落, 使用<code>&lt;p&gt;&lt;/p&gt;</code></li>
</ol>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h1</span>&gt;</span>许竣皓<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>大家好, 我是大家的前端老师, 让我们一起开心的学习前端吧!!!<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<ol start="5">
<li>使用浏览器打开网页, 查看效果, 推荐使用插件<code>open in browser</code>, 默认快捷键是<code>alt+b</code></li>
</ol>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210827185003.png" alt="image-20210827185003665"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922193630.png" alt="image-20220922193630581"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922193605.png" alt="image-20220922193605414"></p>
<h1 id="容易出错的地方"><a href="#容易出错的地方" class="headerlink" title="容易出错的地方"></a>容易出错的地方</h1><blockquote>
<p>写完代码, 网页一片空白(需要设置自动保存)</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210827185100.png" alt="image-20210827185100632"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210827185308.png" alt="image-20210827185308774"></p>
<blockquote>
<p>按<code>!</code>, 不能自动生成代码(必须是英文的感叹号)</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161546268.png" alt="image-20211016154644144"></p>
<h1 id="代码结构分析"><a href="#代码结构分析" class="headerlink" title="代码结构分析"></a>代码结构分析</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922194612.png" alt="image-20220922194612229"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922194710.png" alt="image-20220922194710764"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922194803.png" alt="image-20220922194803533"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922194850.png" alt="image-20220922194850834"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922195012.png" alt="image-20220922195011969"></p>
<h1 id="思考题"><a href="#思考题" class="headerlink" title="思考题"></a>思考题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922195139.png" alt="image-20220922195139325"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922195207.png" alt="image-20220922195207787"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922195346.png" alt="image-20220922195346693"></p>
<blockquote>
<p>温馨提示, 如果将来渲染出来的效果, 和你书写的代码不一致, 记得查看浏览器最终的渲染结果, 快捷键<code>f12</code>, 点击<code>elements</code>标签</p>
</blockquote>
<h1 id="判断题"><a href="#判断题" class="headerlink" title="判断题"></a>判断题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095905.png" alt="image-20210823095718842"></p>
<h1 id="文档类型声明-DTD"><a href="#文档类型声明-DTD" class="headerlink" title="文档类型声明 DTD"></a>文档类型声明 DTD</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922194612.png" alt="image-20220922194612229"></p>
<blockquote>
<p>HTML 文件第一行必须是 DTD（Document Type Definition，文档类型声明）</p>
<p>不写 DTD 会引发浏览器的一些兼容问题</p>
<p>不同版本的 HTML 有不同的 DTD 写法</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161557653.png" alt="image-20211016155706565"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095921.png" alt="image-20210823095921595"></p>
<h1 id="选择题-3"><a href="#选择题-3" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下列代码，能正确定义文档类型的是？（选择一项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161602589.png" alt="image-20211016160214560"></p>
<h1 id="W3C-组织"><a href="#W3C-组织" class="headerlink" title="W3C 组织"></a>W3C 组织</h1><blockquote>
<p>W3C（The World Wide Web Consortium，万维网联合会）是万维网的主要国际标准组织。</p>
<p>该联盟成立于 1994 年，负责制定 Web 标准，主要是 HTML 和 CSS。</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161558768.png" alt="image-20211016155834722"></p>
<h1 id="选择题-4"><a href="#选择题-4" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下面不属于 HTML 标签的是？（选择一项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161601923.png" alt="image-20211016160110895"></p>
<h1 id="设置网页语言"><a href="#设置网页语言" class="headerlink" title="设置网页语言"></a>设置网页语言</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922200616.png" alt="image-20220922200616260"></p>
<blockquote>
<p>html 标签的一个属性, 属性名 lang, 属性值可以有多个, en, 英文, zh-CN, 中文</p>
<p><code>&lt;html lang=&quot;en&quot;&gt;</code>, 代表这是一个英文的网页, 老版本的浏览器会弹框, 询问是否翻译</p>
<p>把语言设置成中文, 就不会弹框了, <code>&lt;html lang=&quot;zh-CN&quot;&gt;</code>, 表示这是一个中文的网页</p>
<p>html 是标签, lang, 属性名, en, 属性值</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签</span> <span class="attr">属性</span>=<span class="string">&quot;属性值&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">标签</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">吴彦祖</span> <span class="attr">性别</span>=<span class="string">&quot;男&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">吴彦祖</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="选择题-5"><a href="#选择题-5" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>以下说法中，错误的是？（选择两项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161600051.png" alt="image-20211016160017021"></p>
<h1 id="字符集"><a href="#字符集" class="headerlink" title="字符集"></a>字符集</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922201243.png" alt="image-20220922201242914"></p>
<blockquote>
<p>charset 属性用来设置字符集, 写在 meta 标签里面</p>
<p>编码和解码使用不同的字符集, 就会乱码</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922201544.png" alt="image-20220922201544296"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922201457.png" alt="image-20220922201457619"></p>
<blockquote>
<p>支持中文的字符集: utf-8, gbk, gb2312</p>
</blockquote>
<h1 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h1><blockquote>
<p>HTML 叫做“超文本标记语言”，超文本标记就是标签</p>
<p>这些标签都有不同的功能, 标签通常成对儿出现</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922201923.png" alt="image-20220922201923627"></p>
<blockquote>
<p>开始和结束标签的区别, 结束标签多了一个<code>/</code>, 斜线</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922202118.png" alt="image-20220922202118377"></p>
<h1 id="不同的标签有不同的功能"><a href="#不同的标签有不同的功能" class="headerlink" title="不同的标签有不同的功能"></a>不同的标签有不同的功能</h1><blockquote>
<p>标签可以给文字设置不同的语义, 继而呈现不同的样式</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922202242.png" alt="image-20220922202242760"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922202319.png" alt="image-20220922202319898"></p>
<h1 id="双标签"><a href="#双标签" class="headerlink" title="双标签"></a>双标签</h1><blockquote>
<p>HTML 叫做“超文本标记语言”，超文本标记就是标签, 这些标签都有不同的功能, 而且多数都是成对出现的</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922202452.png" alt="image-20220922202452530"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823030802.png" alt="image-20210823030802586"></p>
<h1 id="单标签"><a href="#单标签" class="headerlink" title="单标签"></a>单标签</h1><blockquote>
<p>有的标签不是成对儿的，而是只有起始标签, 有结束标签的<code>/</code>，称为单标签</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220922202557.png" alt="image-20220922202556979"></p>
<blockquote>
<p>在 HTML4 代，单标签必须写一个结尾的斜杠，HTML5 不用写</p>
<p>常见单标签<code>&lt;br&gt;</code> <code>&lt;hr&gt;</code> <code>&lt;img&gt;</code> <code>&lt;input&gt;</code> <code>&lt;meta&gt;</code></p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202204201732644.png" alt="image-20211016155907340"></p>
<h1 id="选择题-6"><a href="#选择题-6" class="headerlink" title="选择题"></a>选择题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823154521.png" alt="image-20210823154521533"></p>
<h1 id="选择题-7"><a href="#选择题-7" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下面哪个标签是不需要成对出现的？（选择一项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161816769.png" alt="image-20211016181644732"></p>
<h1 id="标签之间的关系"><a href="#标签之间的关系" class="headerlink" title="标签之间的关系"></a>标签之间的关系</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810160351.png" alt="image-20210810160351079"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823031006.png" alt="image-20210823031005935"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095542.png" alt="image-20210823095541316"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>This is a page title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h1</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="html-的树形结构"><a href="#html-的树形结构" class="headerlink" title="html 的树形结构"></a>html 的树形结构</h1><blockquote>
<p>html 的标签之间, 是一个树形结构的关系, 有点类似于家谱</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810145113.png" alt="image-20210810145112983"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095640.png" alt="image-20210823095640473"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810152223.png" alt="image-20210810152223616"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810153627.png" alt="image-20210810153627386"></p>
<h1 id="选择题-8"><a href="#选择题-8" class="headerlink" title="选择题"></a>选择题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823154358.png" alt="image-20210823154358143"></p>
<h1 id="排序题"><a href="#排序题" class="headerlink" title="排序题"></a>排序题</h1><blockquote>
<p>排成正确的顺序</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095736.png" alt="image-20210823095735939"></p>
<h1 id="填空题"><a href="#填空题" class="headerlink" title="填空题"></a>填空题</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823095745.png" alt="image-20210823095745385"></p>
<h1 id="基本标签"><a href="#基本标签" class="headerlink" title="基本标签"></a>基本标签</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220924141614.png" alt="image-20220924141614678"></p>
<h1 id="title-标签"><a href="#title-标签" class="headerlink" title="title 标签"></a>title 标签</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823031359.png" alt="image-20210823031358243"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161628495.png" alt="image-20211016162816420"></p>
<blockquote>
<p>title 标签用来设置网页的标题，文字会显示在浏览器的标签栏上</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161632937.png" alt="image-20211016163219889"></p>
<blockquote>
<p>如果 title 标签内容为空, 浏览器会把文件名作为标题</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161632463.png" alt="image-20211016163256416"></p>
<h1 id="title-的用途"><a href="#title-的用途" class="headerlink" title="title 的用途"></a>title 的用途</h1><blockquote>
<p>title 也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置 title 是必要的</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161631368.png" alt="image-20211016163106327"></p>
<h1 id="选择题-9"><a href="#选择题-9" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>以下选项中，哪一个可以设置如下图中的网页标题?（选择一项）:</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161638625.png" alt="img"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161638565.png" alt="image-20211016163852533"></p>
<blockquote>
<p>参考解析：</p>
<p>本题考查的是 html 标签的使用。</p>
<p>用来设置页面标题的是 title 标签，所以本题答案为 A。</p>
</blockquote>
<h1 id="文章标题标签"><a href="#文章标题标签" class="headerlink" title="文章标题标签"></a>文章标题标签</h1><blockquote>
<p>h 系列标签表示“标题”语义，h 是 headline 的意思</p>
</blockquote>
<table>
<thead>
<tr>
<th align="center">标签</th>
<th align="center">语义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">h1</td>
<td align="center">一级标题</td>
</tr>
<tr>
<td align="center">h2</td>
<td align="center">二级标题</td>
</tr>
<tr>
<td align="center">h3</td>
<td align="center">三级标题</td>
</tr>
<tr>
<td align="center">h4</td>
<td align="center">四级标题</td>
</tr>
<tr>
<td align="center">h5</td>
<td align="center">五级标题</td>
</tr>
<tr>
<td align="center">h6</td>
<td align="center">六级标题</td>
</tr>
</tbody></table>
<blockquote>
<p>使用场景: 在新闻和文章的页面中，都离不开标题，用来突出显示文章主题</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810161138.png" alt="image-20210810161138807"></p>
<blockquote>
<p>标题一共有 6 级, h1 为一级标题, h2 为二级标题, 以此类推, 重要程度依次递减</p>
<p>标题的特点, 文字加粗, 字体变大, h1 最大, h6 最小, 独占一行</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810161608.png" alt="image-20210810161608640"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810161701.png" alt="image-20210810161701006"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810161814.png" alt="image-20210810161814117"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h1</span>&gt;</span>一级标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h2</span>&gt;</span>二级标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h3</span>&gt;</span>三级标题<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>四级标题<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h5</span>&gt;</span>五级标题<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h6</span>&gt;</span>六级标题<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是段落<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="自动重命名标签"><a href="#自动重命名标签" class="headerlink" title="自动重命名标签"></a>自动重命名标签</h1><blockquote>
<p>需要装一个插件, <code>auto rename tag</code>, 方便修改标签, 改开始标签, 结束标签自动更新</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220924192408.png" alt="image-20220924192408004"></p>
<h1 id="选择题-10"><a href="#选择题-10" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>以下哪个标签，是最小的标题标签？（选择一项）:</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161825992.png" alt="image-20211016182500951"></p>
<blockquote>
<p>参考解析：</p>
<p>本题考查的是标题标签。</p>
<p><code>＜h1＞</code>标签用于标题设置，从 h1~h6, 从大到小，所以最小的是<code>&lt;h6&gt;</code>，最大的是<code>&lt;h1&gt;</code>。</p>
<p>html 中没有<code>&lt;h&gt;</code>，<code>&lt;h7&gt;</code>，它们是错误写法，所以本题答案为 C。</p>
</blockquote>
<h1 id="p-段落标签"><a href="#p-段落标签" class="headerlink" title="p 段落标签"></a>p 段落标签</h1><blockquote>
<p>使用场景: 在新闻和文章的页面中，用于分段显示</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810162042.png" alt="image-20210810162042895"></p>
<blockquote>
<p>p 标签, <code>paragraph</code> 的缩写, 段落之间有缝隙</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810162158.png" alt="image-20210810162158615"></p>
<blockquote>
<p>p 标签独占一行</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810162535.png" alt="image-20210810162535274"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		你好</span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span>我叫张三<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		很高兴认识你</span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>文字一行放不下的话, 自动换行</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810162422.png" alt="image-20210810162422188"></p>
<blockquote>
<p><code>&lt;p&gt;&lt;/p&gt;</code>标签中不能嵌套 h 系列标签和其他 p 标签</p>
</blockquote>
<h1 id="br-标签"><a href="#br-标签" class="headerlink" title="br 标签"></a>br 标签</h1><blockquote>
<p>还需要换行标签, 直接回车不就行了吗?</p>
<p>答: 不行, 在 html 中, 多个空格和换行, 都会被解析成一个空格</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810163511.png" alt="image-20210810163511631"></p>
<blockquote>
<p>br, break 的缩写, 单标签, 可以让文字强制换行, 不会像 p 标签一样有缝隙</p>
<p><code>&lt;br&gt;</code>, <code>&lt;br/&gt;</code>, <code>&lt;br /&gt;</code> 都可以</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810163729.png" alt="image-20210810163729385"></p>
<h1 id="br-标签-和-p-标签的区别"><a href="#br-标签-和-p-标签的区别" class="headerlink" title="br 标签 和 p 标签的区别"></a>br 标签 和 p 标签的区别</h1><blockquote>
<ol>
<li>段落标签之间会有间隙</li>
<li>换行标签只是单纯的换行, 行距不变</li>
<li><code>&lt;br&gt;</code>是单标签, <code>&lt;p&gt;</code>是双标签</li>
</ol>
</blockquote>
<h1 id="hr-标签"><a href="#hr-标签" class="headerlink" title="hr 标签"></a>hr 标签</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810163909.png" alt="image-20210810163909175"></p>
<blockquote>
<p>hr 标签 <code>Horizontal Rule</code> 的缩写, 使用场景: 分割主题和内容, 在页面中显示一条水平线</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810165346.png" alt="image-20210810165346663"></p>
<blockquote>
<p>它是独占一行的, 单标签, <code>&lt;hr&gt;</code> <code>&lt;hr/&gt;</code> <code>&lt;hr /&gt; </code>都可以</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810165448.png" alt="image-20210810165448876"></p>
<h1 id="文本格式化标签"><a href="#文本格式化标签" class="headerlink" title="文本格式化标签"></a>文本格式化标签</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171947028.png" alt="image-20211017194701997"></p>
<blockquote>
<p>可以改变文字的样式, 让文字加粗, 倾斜, 添加删除线, 下划线</p>
</blockquote>
<table>
<thead>
<tr>
<th>语义</th>
<th>标签</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>加粗</td>
<td><code>&lt;strong&gt;</code>, <code>&lt;b&gt;</code></td>
<td>推荐<code>&lt;strong&gt;</code></td>
</tr>
<tr>
<td>倾斜</td>
<td><code>&lt;em&gt;</code> , <code>&lt;i&gt;</code></td>
<td>推荐<code>&lt;em&gt;</code></td>
</tr>
<tr>
<td>删除线</td>
<td><code>&lt;del&gt;</code> , <code>&lt;s&gt;</code></td>
<td>推荐<code>&lt;del&gt;</code></td>
</tr>
<tr>
<td>下划线</td>
<td><code>&lt;ins&gt;</code>, <code>&lt;u&gt;</code></td>
<td>推荐<code>&lt;ins&gt;</code></td>
</tr>
</tbody></table>
<h1 id="加粗"><a href="#加粗" class="headerlink" title="加粗"></a>加粗</h1><blockquote>
<p><code>&lt;strong&gt;</code> <code>&lt;b&gt;</code> 可以是内容加粗</p>
<p><a target="_blank" rel="noopener" href="https://www.runoob.com/tags/tag-strong.html">https://www.runoob.com/tags/tag-strong.html</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我想 <span class="tag">&lt;<span class="name">strong</span>&gt;</span>加粗<span class="tag">&lt;/<span class="name">strong</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">我想 <span class="tag">&lt;<span class="name">b</span>&gt;</span>加粗<span class="tag">&lt;/<span class="name">b</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="倾斜"><a href="#倾斜" class="headerlink" title="倾斜"></a>倾斜</h1><blockquote>
<p><code>&lt;i&gt;</code>, <code>&lt;em&gt;</code>可以是文本倾斜</p>
<p><a target="_blank" rel="noopener" href="https://www.runoob.com/tags/tag-i.html">https://www.runoob.com/tags/tag-i.html</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我想 <span class="tag">&lt;<span class="name">em</span>&gt;</span>倾斜<span class="tag">&lt;/<span class="name">em</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">我想 <span class="tag">&lt;<span class="name">i</span>&gt;</span>倾斜<span class="tag">&lt;/<span class="name">i</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="删除线"><a href="#删除线" class="headerlink" title="删除线"></a>删除线</h1><blockquote>
<p><code>&lt;del&gt;</code>,<code>&lt;s&gt;</code>, 删除文本 delete, 删除</p>
<p><a target="_blank" rel="noopener" href="https://www.runoob.com/tags/tag-del.html">https://www.runoob.com/tags/tag-del.html</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我想 <span class="tag">&lt;<span class="name">del</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">del</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">我想 <span class="tag">&lt;<span class="name">s</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">s</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="下划线"><a href="#下划线" class="headerlink" title="下划线"></a>下划线</h1><blockquote>
<p><code>&lt;u&gt;</code>,<code>&lt;ins&gt;</code>, 可以添加下划线</p>
<p><a target="_blank" rel="noopener" href="https://www.runoob.com/tags/tag-ins.html">https://www.runoob.com/tags/tag-ins.html</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我想要 <span class="tag">&lt;<span class="name">ins</span>&gt;</span>下划线<span class="tag">&lt;/<span class="name">ins</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">我想要 <span class="tag">&lt;<span class="name">u</span>&gt;</span>下划线<span class="tag">&lt;/<span class="name">u</span>&gt;</span> 文本 <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="重新认识-html"><a href="#重新认识-html" class="headerlink" title="重新认识 html"></a>重新认识 html</h1><blockquote>
<p>现在，你就能彻底理解 HTML“超文本标记语言”的含义了</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161816287.png" alt="image-20211016181603244"></p>
<h1 id="选择题-11"><a href="#选择题-11" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下列选项中，哪个标签里的内容不会在网页文档中显示？（选择两项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110161818886.png" alt="image-20211016181829850"></p>
<blockquote>
<p>参考解析：</p>
<p>本题考查 html 标签的作用。</p>
<p><code>&lt;head&gt;</code>标签内的内容是不会在网页文档中显示的，主要用于定义文档的头部，它是所有头部元素的容器。<code>&lt;head&gt;</code> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。</p>
<p><code>&lt;title&gt;</code> 标签可定义文档的标题，内容不是显示在页面文档中，而是在网页的标签中显示。</p>
<p><code>&lt;p&gt;</code> 标签定义段落，内容显示在页面文档中。</p>
<p>所以本题答案为 AC。</p>
</blockquote>
<h1 id="HTML5-特性"><a href="#HTML5-特性" class="headerlink" title="HTML5 特性"></a>HTML5 特性</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171947446.png" alt="image-20211017194758419"></p>
<h1 id="空白折叠现象"><a href="#空白折叠现象" class="headerlink" title="空白折叠现象"></a>空白折叠现象</h1><blockquote>
<p>文字和文字之间的多个空格、换行会被折叠成一个空格</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810163511.png" alt="image-20210810163511631"></p>
<h1 id="转义字符"><a href="#转义字符" class="headerlink" title="转义字符"></a>转义字符</h1><blockquote>
<p>请首先自己试试看：在网页中显示<code>“今天我们学习了&lt;p&gt;&lt;/p&gt;标签的功能是段落”</code></p>
<p>如何输入<code>&lt;p&gt;&lt;/p&gt;</code>才不会被当做标签呢？这就需要使用转义</p>
<p>常见转义字符（字符实体）:</p>
</blockquote>
<table>
<thead>
<tr>
<th align="center">转义字符</th>
<th align="center">意义</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><code>&amp;lt;</code></td>
<td align="center">小于号</td>
</tr>
<tr>
<td align="center"><code>&amp;gt;</code></td>
<td align="center">大于号</td>
</tr>
<tr>
<td align="center"><code>&amp;nbsp;</code></td>
<td align="center">空格(不会被折叠)</td>
</tr>
<tr>
<td align="center"><code>&amp;copy;</code></td>
<td align="center">版权符号 ©</td>
</tr>
</tbody></table>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202204201627228.png" alt="image-20220420162700119"></p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html/html_entities.asp">https://www.w3school.com.cn/html/html_entities.asp</a></p>
</blockquote>
<h1 id="选择题-12"><a href="#选择题-12" class="headerlink" title="选择题"></a>选择题</h1><blockquote>
<p>下面选项中，哪一个是用来设置空格的（选择一项）</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171535354.png" alt="image-20211017153512326"></p>
<blockquote>
<p>参考解析：</p>
<p>本题考查转义字符。</p>
<p><code>&amp;lt;</code>表示小于号，<code>&amp;gt;</code>表示大于号，<code>&amp;copy;</code>表示版权符号 ©,<code>&amp;nbsp;</code>表示空格，</p>
<p>所以本题答案为 B。</p>
</blockquote>
<h1 id="代码操作"><a href="#代码操作" class="headerlink" title="代码操作"></a>代码操作</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110172012203.png" alt="image-20211017201252145"></p>
<h1 id="HTML-注释"><a href="#HTML-注释" class="headerlink" title="HTML 注释"></a>HTML 注释</h1><blockquote>
<p>为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示</p>
<p>HTML 的注释语法如下，可以在 VScode 编辑器中使用<code>ctrl+/</code>键输入</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 注释内容 --&gt;</span><br></pre></td></tr></table></figure>

<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171532000.png" alt="image-20211017153204908"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171534025.png" alt="image-20211017153400985"></p>
<h1 id="代码格式化"><a href="#代码格式化" class="headerlink" title="代码格式化"></a>代码格式化</h1><blockquote>
<p>所谓格式化, 就是按照一定的规则书写代码</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828140637.png" alt="image-20210828140637875"></p>
<blockquote>
<p>html 代码不格式化也可以正常显示</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828140716.png" alt="image-20210828140716083"></p>
<blockquote>
<p>格式化的代码更方便阅读, 也更容易让大家在代码出错时找到原因</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828153307.png" alt="image-20210828153307258"></p>
<blockquote>
<p>html 是大小写不敏感的, 大写, 小写都能运行</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210829201621.png" alt="image-20210829201621064"></p>
<blockquote>
<p>自动格式化, 可以鼠标右键, 选择<code>格式化文档</code>, 就可以自动格式化</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171706180.png" alt="image-20211017170652132"></p>
<blockquote>
<p>按键映射插件, 让快捷键更合理, 更人性化</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220924200830.png" alt="image-20220924200830863"></p>
<blockquote>
<p>安装 prettier 插件, 也可以格式化, 支持多种语言</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828164144.png" alt="image-20210828164144773"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/202110171707022.png" alt="image-20211017170721982"></p>
<blockquote>
<p>如果多个插件都可以进行格式化, 可以配置默认的格式化插件</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828164548.png" alt="image-20210828164548837"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828164912.png" alt="image-20210828164912679"></p>
<h1 id="不同层级-不同颜色"><a href="#不同层级-不同颜色" class="headerlink" title="不同层级, 不同颜色"></a>不同层级, 不同颜色</h1><blockquote>
<p>如果代码量很大的话, 不同的层级显示不同颜色, 可以更好的阅读代码, 更方便的把握代码结构</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828162538.png" alt="image-20210828162538246"></p>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828162626.png" alt="image-20210828162625982"></p>
<blockquote>
<p>使用插件可以做到</p>
</blockquote>
<p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20220924201254.png" alt="image-20220924201253901"></p>
<h1 id="作业-三国演义"><a href="#作业-三国演义" class="headerlink" title="作业: 三国演义"></a>作业: 三国演义</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210810165928.png" alt="image-20210810165928371"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">三国演义</span><br><span class="line">第一段</span><br><span class="line">话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类[1]，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓[2]自此愈横。</span><br><span class="line"></span><br><span class="line">第二段</span><br><span class="line">建宁二年四月望日，帝御[3]温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺[4]堕鸡化，乃妇寺干政[5]之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</span><br><span class="line"></span><br><span class="line">第三段</span><br><span class="line">时巨鹿郡有兄弟三人：一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人。若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。中平元年正月内，疫气流行，张角散施符水，为人治病，自称“大贤良师”。角有徒弟五百馀人，云游四方，皆能书符念咒。次后徒众日多，角乃立三十六方，大方万馀人，小方六七千，各立渠帅[6]，称为将军；讹言：“苍天已死，黄天当立；岁在甲子，天下大吉。”令人各以白土，书“甲子”二字于家中大门上。青、幽、徐、冀、荆、扬、兖、豫八州之人，家家侍奉大贤良师张角名字。角遣其党马元义，暗赍[7]金帛，结交中涓封谞，以为内应。角与二弟商议曰：“至难得者，民心也。今民心已顺，若不乘势取天下，诚为可惜。”遂一面私造黄旗，约期举事；一面使弟子唐周，驰书报封谞。唐周乃径赴省中[8]告变。帝召大将军何进调兵擒马元义，斩之；次收封谞等一干人下狱。张角闻知事露，星夜举兵，自称“天公将军”，张宝称“地公将军”，张梁称“人公将军”；申言于众曰：“今汉运将终，大圣人出。汝等皆宜顺天从正，以乐太平。”四方百姓，裹黄巾从张角反者四五十万。贼势浩大，官军望风而靡[9]。何进奏帝火速降诏，令各处备御，讨贼立功；一面遣中郎将卢植、皇甫嵩、朱儁，各引精兵，分三路讨之。</span><br></pre></td></tr></table></figure>

<h1 id="作业-前端介绍"><a href="#作业-前端介绍" class="headerlink" title="作业: 前端介绍"></a>作业: 前端介绍</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210828172609.png" alt="image-20210828172609689"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">前端</span><br><span class="line">前端即网站前台部分, 运行在PC端, 移动端等浏览器上展现给用户浏览的网页.</span><br><span class="line"></span><br><span class="line">随着互联网技术的发展, 前端框架的应用及跨平台响应式网页设计能够适应各种屏幕分辨率, 合适的动效设计, 给用户带来极高的用户体验.</span><br><span class="line"></span><br><span class="line">前端核心技术</span><br><span class="line">1. HTML</span><br><span class="line">2. CSS</span><br><span class="line">3. JavaScript</span><br></pre></td></tr></table></figure>

<h1 id="作业-小猪佩奇"><a href="#作业-小猪佩奇" class="headerlink" title="作业: 小猪佩奇"></a>作业: 小猪佩奇</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823150511.png" alt="image-20210823150511633"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">小猪佩奇</span><br><span class="line">《小猪佩奇》，又译作《粉红猪小妹》（台湾译为粉红猪），原名为《Peppa Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、戴维斯（Davis）创作、导演和制作的一部英国学前电视动画片，也是历年来最具潜力的学前儿童品牌。故事围绕小猪佩奇与家人的愉快经历，幽默而有趣，藉此宣扬传统家庭观念与友情，鼓励小朋友们体验生活。 由英国E1 Kids于2004年5月31日发行首播后，其动画片已于全球180个地区播放，现已播出7季，中国中央电视台少儿频道也在热播之中。</span><br><span class="line"></span><br><span class="line">《小猪佩奇》每集长度约5分钟，故事围绕一只名叫佩奇的女孩小猪以及她的家庭和朋友展开。 小猪佩奇是一只可爱的小猪。她已经四岁了，与她的妈妈、爸爸和弟弟乔治生活在一起。佩奇最喜欢做的事情是玩游戏，把自己打扮得漂漂亮亮的，去度假，以及在泥坑里快乐的跳上跳下，与小羊苏西（她最好的朋友）乔治（她的弟弟）一起玩儿，拜访她的姥姥（猪妈妈的妈妈）、姥爷（猪妈妈的爸爸）、姨妈姨爸。</span><br><span class="line"></span><br><span class="line">角色介绍</span><br><span class="line">佩奇(Peppa Pig)（英文配音：海莉·博德，中文配音：陈奕雯）</span><br><span class="line">佩奇是一只非常可爱的小猪，她和她的妈妈、爸爸以及弟弟乔治生活在一起。她和弟弟一样很喜欢恐龙，尤其是马门溪龙。 她最喜欢跳泥坑，最喜欢吃的是意大利面和巧克力蛋糕，最喜欢扮成小仙女公主，最喜欢喝橙汁，很喜欢去拜访她的姥姥爷爷和到伯父伯母家玩。</span><br><span class="line"></span><br><span class="line">猪爸爸(Daddy Pig)（英文配音：Richard Ridings，中文配音：符冲）</span><br><span class="line">猪爸爸是佩奇和乔治的爸爸，会开车，也会做饭。有时有点迷糊，但非常疼爱佩奇和乔治，也非常喜欢逞强，经常说自己是某方面的专家（实际上他基本全都不擅长），是跳泥坑的世界冠军。</span><br><span class="line"></span><br><span class="line">猪妈妈(Mummy Pig)（英文配音：Morwenna Banks，中文配音：范楚绒）</span><br><span class="line">猪妈妈是佩奇和乔治的妈妈，是个非常温柔贤惠的妈妈，主要是在家里给全家做饭做家务。也工作，但是是在家里工作，喜欢吃蛋糕。</span><br><span class="line"></span><br><span class="line">普及专栏</span><br><span class="line">2021年8月23日</span><br></pre></td></tr></table></figure>

<h1 id="作业-将进酒-李白"><a href="#作业-将进酒-李白" class="headerlink" title="作业: 将进酒-李白"></a>作业: 将进酒-李白</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823143642.png" alt="image-20210823143642783"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">将进酒</span><br><span class="line">作者: 李白</span><br><span class="line"></span><br><span class="line">君不见黄河之水天上来，奔流到海不复回。</span><br><span class="line">君不见高堂明镜悲白发，朝如青丝暮成雪。</span><br><span class="line">人生得意须尽欢，莫使金樽空对月。</span><br><span class="line">天生我材必有用，千金散尽还复来。</span><br><span class="line">烹羊宰牛且为乐，会须一饮三百杯。</span><br><span class="line">岑夫子，丹丘生，将进酒，杯莫停。</span><br><span class="line">与君歌一曲，请君为我倾耳听。</span><br><span class="line">钟鼓馔玉不足贵，但愿长醉不愿醒。</span><br><span class="line">古来圣贤皆寂寞，惟有饮者留其名。</span><br><span class="line">陈王昔时宴平乐，斗酒十千恣欢谑。</span><br><span class="line">主人何为言少钱，径须沽取对君酌。</span><br><span class="line">五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</span><br></pre></td></tr></table></figure>

<h1 id="作业-天气新闻"><a href="#作业-天气新闻" class="headerlink" title="作业: 天气新闻"></a>作业: 天气新闻</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823143122.png" alt="image-20210823143122931"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">40.6摄氏度：上海创出140年气象史上高温新纪录</span><br><span class="line">2013年07月27日</span><br><span class="line">10:58:26来源：新华网</span><br><span class="line"></span><br><span class="line">新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</span><br><span class="line"></span><br><span class="line">上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</span><br><span class="line"></span><br><span class="line">在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</span><br><span class="line"></span><br><span class="line">由于气温实在太高，上海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</span><br></pre></td></tr></table></figure>

<h1 id="作业-李白介绍"><a href="#作业-李白介绍" class="headerlink" title="作业: 李白介绍"></a>作业: 李白介绍</h1><p><img src="https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210823151653.png" alt="image-20210823151653445"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">李白</span><br><span class="line">唐朝著名的浪漫主义诗人</span><br><span class="line">李白（701年2月8日—762年12月），字太白，号青莲居士，又号“谪仙人”，汉族。是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。其人爽朗大方，爱饮酒作诗，喜交友。</span><br><span class="line"></span><br><span class="line">   2016深圳  科技版权所有</span><br></pre></td></tr></table></figure>

        </div>
    

</div>
            
                
<div class="post">

    <div class="post-header index">
        <h1 class="title">
            <a href="/2022/12/06/hello-world/">
                Hello World
            </a>
        </h1>
        <div class="post-info">
            
                <span class="date">2022-12-06</span>
            
            
            
        </div>
    </div>

    
        <div class="content">
            <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>

        </div>
    

</div>
            
        </section>
    </div>
</div>






</div>

<!-- Footer -->
<div class="push"></div>

<footer class="footer-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
                <h2>关于</h2>
                <p>
                    这是我的技术博客, 记录了平时的一些研究
                </p>
            </div>
            
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
        <h2>最近的博客</h2>
        <ul>
            
            <li>
                <a class="footer-post" href="/2022/12/06/demo/">day002-HTML</a>
            </li>
            
            <li>
                <a class="footer-post" href="/2022/12/06/hello-world/">Hello World</a>
            </li>
            
        </ul>
    </div>



            
        </div>
        <!-- <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <ul class="list-inline footer-social-icons">
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://github.com/klugjo/hexo-theme-alpha-dust">
                            <span class="footer-icon-container">
                                <i class="fa fa-github"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://twitter.com/?lang=en">
                            <span class="footer-icon-container">
                                <i class="fa fa-twitter"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://www.facebook.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-facebook"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://www.instagram.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-instagram"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://dribbble.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-dribbble"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://telegram.org/">
                            <span class="footer-icon-container">
                                <i class="fa fa-telegram"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://www.behance.net/">
                            <span class="footer-icon-container">
                                <i class="fa fa-behance"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a target="_blank" rel="noopener" href="https://500px.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-500px"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="mailto:test@example.com">
                            <span class="footer-icon-container">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="\#">
                            <span class="footer-icon-container">
                                <i class="fa fa-rss"></i>
                            </span>
                        </a>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="footer-copyright">
                    @Untitled. All right reserved | Design & Hexo <a target="_blank" rel="noopener" href="http://www.codeblocq.com/">Jonathan Klughertz</a>
                </div>
            </div>
        </div> -->
    </div>
</footer>

<!-- After footer scripts -->

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Tween Max -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Custom JavaScript -->

<script src="/js/main.js"></script>


<!-- Disqus Comments -->



</body>

</html>